<template>
  <div class="detail-container">
    <div class="detail-header">
      <div class="left c-shadow">
        <!-- <el-button class="whitelist" type="info" @click.prevent="openDialog('whitelist')">加入白名单</el-button> -->
        <h3>
          <router-link tag="a" target="_blank" :to="{name:'baseinfoa', query: {entname:entname}}">
            {{entname || '--'}}
            <span v-if="baseInfo.registerStatus === '注销'">
              已注销
            </span>
          </router-link>
          <!--点击到企业库
           -->
        </h3>
        <ul class="info-list">
          <li><span>企业类型：</span>{{baseInfo.type || '--'}}</li>
          <li class="min" style="margin-top: -2px;" v-if="!riskInfo.isRisk"><span class="big flames">烽火指数：</span><span class="hot-number">{{riskInfo.totalRiskScore || '--'}}</span></li>
          <li class="min riskNum" v-else><span class="big flames">烽火指数：</span><span class="icon-risk"></span><span class="icon"></span><span class="hot-number" style="margin:2px 0 0 -10px">{{riskInfo.totalRiskScore || '--'}}</span></li>
          <li class="min" :title="baseInfo.legalPerson"><span>法人：</span>{{baseInfo.legalPerson || '--'}}</li>
          <li class="min"><span class="big">监管状态：</span>{{riskInfo.statusWord || '--'}}</li>
          <li><span>注册时间：</span>{{baseInfo.registerDate | dateFormat}}</li>
          <li><span class="big">最新预警时间：</span>{{riskInfo.stepDate5 | dateFormat}}</li>
          <li class="min">
            <span>注册资金：</span>
            {{baseInfo.money ? baseInfo.money + baseInfo.moneyCurrency : '--'}}
          </li>
          <li :title="riskInfo.predictionWord" class="warning-type-word min"><span>预警原因：</span>{{riskInfo.riskDescription || '--'}}</li>
          <li class="min" :title="baseInfo.phone"><span class="s-min">注册电话：</span>{{baseInfo.phone || '--'}}</li>
          <li class="min"><span>网址：</span><a :href="'http://' + baseInfo.url" target="_blank" v-if="baseInfo.url">{{baseInfo.url || '--'}}</a><span v-else>--</span></li>
          <li class="overflow-hidden" :title="baseInfo.location"><span>注册地址：</span>{{baseInfo.address || '--'}}</li>
          <li class="overflow-hidden" :title="address"><span>经营地址：</span>{{address || '--'}}</li>
          <li><span>企业文件:</span>
            <div class="uploadingFilesNoBg" v-if="fileLists.length==0">
              <span>请上传文件</span>
            </div>
            <el-tooltip class="item" effect="dark" placement="right" v-else>
              <div slot="content">
                <p class="file-list" v-for="(item,idx) in fileLists" :key="idx"><a target="_blank" @click="down(item.uploadFileUrl)">{{item.fileName}}</a></p>
              </div>
              <div class="uploadingFiles">
                <a v-for="(item,idx) in fileLists" :key="idx" target="_blank"  @click="down(item.uploadFileUrl)">{{item.fileName}}; </a>
              </div>
            </el-tooltip>
            <p class="files">
              <i class="iconfont icon-shangchuan"></i><span  @click="uploadShow">企业文件上传</span>
            </p>
          </li>
        </ul>
        <div class="detail-btn-group">
          <div v-if="code !== undefined && code2 !== undefined">
            <button class="presentation" @click="reportDownloads" :disabled="isDisable">
              <i class="iconfont icon-xiazai"></i>
              <span>{{downState}}</span>
            </button>
          </div>
          <div v-else>
            <!-- <button class="presentation" disabled="false" @click="reportDownloads" v-if="codes">
              <i class="iconfont icon-xiazai"></i>
              <span>{{codes}}暂无数据</span>
            </button> -->
            <button class="presentation" disabled="false">
              <i class="iconfont icon-xiazai"></i>
              <span>图表生成中...</span>
            </button>
          </div>
          <el-button type="success" v-if="riskInfo.controlStatus !== 4" @click.prevent="openDialog('whitelist')" class="active">加入白名单</el-button>
          <el-button type="info" v-if="riskInfo.controlStatus !== 0" @click.prevent="openDialog('commonly')" plain>设为一般</el-button>
          <el-button type="warning" v-if="riskInfo.controlStatus !== 1" @click.prevent="openDialog('important')" plain>重点监控</el-button>
          <el-button type="success" v-if="riskInfo.controlStatus !== 2" @click.prevent="openDialog('safe')" plain>设为安全</el-button>
          <el-button type="primary" v-if="riskInfo.controlStatus !== 3" @click.prevent="openDialog('shooting')" plain>排查处理</el-button>
        </div>
      </div>
      <div class="right c-shadow" v-if="chartsShow">
        <div id="detailHeaderChart" class="detail-header-chart">
        </div>
      </div>
      <div class="right c-shadow" v-else>
        <div class="nodatachart1">
        </div>
        <j-no-data :mode="'b'" msg="b" class="nodata"></j-no-data>
      </div>
    </div>
    <div class="detail-con">
      <h4 class="detail-base-title">企业风险综合描述</h4>
      <div class="table-wrap">
        <j-loading mode='s' v-show="isShowLoading"></j-loading>
        <table class="business">
          <tr>
            <th>经营风险</th>
            <td :title="jingyingTotal" colspan="3" class="long">{{jingyingTotal | character}}</td>
          </tr>
          <tr>
            <th>舆情风险</th>
            <td :title="yuqingTotal" colspan="3" class="long">{{yuqingTotal | character}}</td>
          </tr>
          <tr>
            <th>关联风险</th>
            <td :title="guanlianTotal" colspan="3" class="long">{{guanlianTotal | character}}</td>
          </tr>
          <tr>
            <th>传播风险</th>
            <td :title="chuanboTotal" colspan="3" class="long">{{chuanboTotal | character}}</td>
          </tr>
        </table>
      </div>
    </div>
    <jSubNav :items="navItems" class="subnav"></jSubNav>
    <j-dialog :initTitle="dialogTitle" ref="importantDia" class="detail-dialog" @closing="dialogClose">
      <h5 v-if="dialogTitle === '设为安全' || dialogTitle === '是否确定加入白名单'">请选择安全期限</h5>
      <p v-if="dialogTitle === '设为安全' || dialogTitle === '是否确定加入白名单'">
        <span v-for="(item,index) in securityDate" v-bind:key="index">
          <input :id="'securityIndex'+index" type="radio" name="security" :value="index+1" v-model="categoryValue"/>
          <label :for="'securityIndex'+index">{{item}}</label>
        </span>
      </p>
      <h5 v-if="dialogTitle !== '是否确定加入白名单'">{{dialogSubtitle}}</h5>
      <h5 v-else>{{dialogWhSubtitle}}</h5>
      <p v-if="dialogTitle === '重点监控'">
        <span v-for="(item,index) in securityDate1" v-bind:key="index+6">
            <input :id="'security2Index'+index" type="radio" name="operate" :value="index+6" v-model="operateValue"/>
            <label :for="'security2Index'+index">{{item}}</label>
          </span>
      </p>
      <p v-if="dialogTitle === '设为安全'">
        <span v-for="(item,index) in securityDate2" v-bind:key="index+9">
            <input :id="'security3Index'+index" :label="1" type="radio" name="operate" :value="index+9" v-model="operateValue"/>
            <label :for="'security3Index'+index">{{item}}</label>
          </span>
      </p>
      <p v-if="dialogTitle === '排查处理'">
        <span v-for="(item,index) in securityDate3" v-bind:key="index+12">
            <input :id="'security4Index'+index" type="radio" name="operate" :value="index+12" v-model="operateValue"/>
            <label :for="'security4Index'+index">{{item}}</label>
          </span>
      </p>
      <p v-if="dialogTitle === '一般监控'">
        <span v-for="(item,index) in securityDate4" v-bind:key="index+16">
            <input :id="'security5Index'+index" type="radio" name="operate" :value="index+16" v-model="operateValue"/>
            <label :for="'security5Index'+index">{{item}}</label>
          </span>
      </p>
      <p v-if="dialogTitle === '是否确定加入白名单'">
        <span v-for="(item,index) in securityDate5" v-bind:key="index+18">
            <input :id="'security6Index'+index" type="radio" name="operate" :value="index+18" v-model="listValue"/>
            <label :for="'security6Index'+index">{{item}}</label>
          </span>
      </p>
      <p v-if="dialogTitle === '是否确定加入白名单' || dialogTitle === '排查处理'">
        <span class="remarkspan">请填写备注</span>
        <!-- <el-input class="remark" v-model="remarkName"></el-input> -->
        <textarea cols="30" rows="10" v-model="remarkName"></textarea>
      </p>
      <p v-show="dialogTextShow">
        <textarea name="" id="other_value" cols="30" rows="10" v-model="text"></textarea>
      </p>
      <h5 class="operate-man">操作人：{{realName}}</h5>
      <p class="errMsg">{{errMsg}}</p>
      <div class="btn">
        <button class="save-btn" @click="dialogEntrue(riskInfo.totalRiskScore, riskInfo.riskDescription)" :disabled="Msgflag">确 定</button>
        <button class="cancle-btn" @click="dialogClose">取 消</button>
      </div>
    </j-dialog>
    <keep-alive v-if="$route.path==='/entdetail/riskrelation'">
      <router-view></router-view>
    </keep-alive>
    <router-view v-else></router-view>
    <!--关联风险-->
    <div id="graph" class="graph" v-show="flag"></div>
    <table class="table" id="table" v-show="flag">
      <thead>
        <th>序号</th>
        <th>关联关系</th>
        <th>关联公司/法人</th>
        <th>法人关系</th>
        <th>法人公司/法人</th>
      </thead>
      <tr v-for="(item,index) in dataChart" :key="index">
        <td>{{index + 1}}</td>
        <td>{{item.gx || '--'}}</td>
        <td v-if="item.isRisk1">
          <router-link tag="a" target="_blank" :to="{name:'baseinfo', query: {entname:item.gs}}">
            <span>{{item.gs || '--'}}</span>
          </router-link>
        </td>
        <td v-else>
          {{item.gs || '--'}}
        </td>
        <td>{{item.zgx || '--'}}</td>
        <td v-if="item.isRisk2">
          <router-link tag="a" target="_blank" :to="{name:'baseinfo', query: {entname:item.zgs}}">
            <span>{{item.zgs || '--'}}</span>
          </router-link>
        </td>
        <td v-else>{{item.zgs || '--'}}</td>
      </tr>
    </table>
    <!--舆情风险-->
    <div v-show="!noData" id="specialWordChart" class="special-word-chart"></div>
    <!-- <img :src="publicBase64"/> -->
    <jDialog :initShow="show" initTitle="企业文件上传" @closing="resetShow">
      <div class="upload-box">
        <el-form label-width="100px" :model="postData" :rules="rules" ref="postData">
          <el-form-item label="企业名称：" prop="entName">
            <el-input class="ent-name" placeholder="输入企业名称或者关键词" disabled v-model="postData.entName"></el-input>
          </el-form-item>
          <el-form-item label="文件类型：" prop="fileType">
            <el-select v-model="postData.fileType" placeholder="请选择" class="ent-name menu-down" style="width:100%">
              <el-option v-for="item in itemsOption" :key="item.value" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传说明：">
            <el-input class="ent-name" type="textarea" :rows="4" placeholder="" v-model="postData.uplodeDescribe"></el-input>
          </el-form-item>
          <el-form-item label="文件上传：" :error="fileError">
            <el-upload :action="uploadAction" :before-upload="beforeAvatarUpload" :limit="10" name="resFile" :data="fileName" :accept="acceptList" :on-success="uploadSuccess" :on-error="uploadError" :file-list="fileList" :on-remove="delFile">
              <el-button size="small" plain :disabled="uploadState">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" type="primary" @click="upload">上 传</el-button>
            <el-button class="btn" type="primary" plain @click="resetShow">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </jDialog>
  </div>
</template>

<script>
  import {
    jSubNav,
    jDialog,
    jLoading,
    jNoData
  } from '../../components'
  import {
    sysManage as upi,
    entdetail as api,
    downLoads as dpi
  } from '../../api'
// import Axios from 'axios'
// import router from '../../router'
export default {
    data() {
      return {
        code2:0,
        codes:'',
        enturl:'',
        code:0,
        parentName: '',
        downState: '企业风险报告下载',
        uploadState: false,
        address:'',
        show: false,
        dialogTitle: '重点监控',
        dialogSubtitle: '请选择操作原因',
        dialogWhSubtitle: '请选择白名单类型',
        categoryValue: 1,
        operateValue: 0,
        listValue: '',
        dialogTextShow: false,
        entid: 0,
        entname: '',
        realName: '',
        remarkName: '',
        baseInfo: {},
        riskInfo: {},
        fileLists: [],
        chartsShow: true,
        isEng: 0,
        fileList: [],
        uploadUrl: window.api_host + '/entDataUpload/addDataUpload',
        uploadAction: window.api_upload,
        postData: {
          entName: '',
          fileType: null,
          type: '',
          uplodeDescribe: '',
          file: ''
        },
        jingyingTotal: '',
        yuqingTotal: '',
        guanlianTotal: '',
        chuanboTotal: '',
        rules: {
          entName: [{
            required: true,
            message: '请输入关联的企业名称',
            trigger: 'blur'
          },
          {
            max: 50,
            message: '最多不能超过50个字符',
            trigger: 'blur'
          }
          ],
          fileType: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }]
        },
        fileName: {
          filename: ''
        },
        // acceptList: 'application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-works,image/*',
        acceptList: 'application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-works,image/*,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        fileError: '',
        itemsOption: [
          {
            value: 1,
            label: '财务报表'
          },
          {
            value: 2,
            label: '税务报表'
          },
          {
            value: 3,
            label: '水电报表'
          },
          {
            value: 4,
            label: '排查报表'
          },
          {
            value: 5,
            label: '其他'
          }
        ],
        status: ['一般监控', '重点监控', '设为安全', '排查处理', '白名单'],
        statusCode: 0,
        complianceNum: 12,
        securityDate: ['一个月', '三个月', '六个月', '一年', '永久安全'],
        securityDate1: ['经排查风险较高', '近期风险较大', '其他'],
        securityDate2: ['已排查无风险', '暂无风险', '其他'],
        // securityDate3: ['已立案调查', '线下排查处理', '其他'],
        // securityDate3: ['线上处理', '线下处理', '自行处置', '移交工商', '移交公安'],
        securityDate3: ['线上处理'],
        securityDate4: ['经排查暂无风险', '其他'],
        securityDate5: ['中央企业', '国资企业', '优质企业', '挂牌机构', '其他'],
        text: '',
        dataChart: [],
        errMsg: '',
        Msgflag: false,
        navItems: [
          {
            name: '基本信息',
            path: 'baseinfo',
            exit: true
          },
          {
            name: '经营风险',
            path: 'risktable',
            riskCount: 0,
            exit: true
          },
          {
            name: '舆情风险',
            path: 'specialword',
            riskCount: 0,
            exit: true
          },
          {
            name: '关联风险',
            path: 'riskrelation',
            riskCount: 0,
            exit: true
          },
          {
            name: '传播风险',
            path: 'riskdiffuse',
            riskCount: 0,
            exit: true
          },
          {
            name: '操作记录',
            path: 'statuschange',
            exit: true
          }
        ],
        flag: false,
        noData: false,
        svgBase64: '', // 关联风险
        publicBase64: '', // 舆情风险
        beaconFireBase64: '', // 走势图
        baseUrl: '',
        isDisable: false,
        items: [],
        isShowLoading: false
      }
    },
    watch: {
      operateValue(value) {
        if (this.dialogTitle !== '排查处理') {
          this.dialogTextShow = +value === 8 || +value === 11 || +value === 17
        }
      }
    },
    methods: {
      down(url) {
        location.href = window.api_host + '/entDataUpload/downPicture?uploadFileUrl=' + url
      },
      resetForm() {
        this.postData.fileType = null
        this.postData.type = ''
        this.postData.uplodeDescribe = ''
        this.fileList = []
      },
      upload() {
        this.$refs['postData'].validate(valid => {
          if (valid) {
            if (this.fileList.length === 0) {
              this.fileError = '请上传文件'
            } else {
              let params = this.postData
              params.resFile = JSON.stringify(this.fileList)
              // console.log(params)
              delete params.file
              delete params.type
              upi
                .postDataUpload(params)
                .then(res => {
                  if (res.code === -1) return false
                  this.tips('上传成功', 'success')
                  this.getUploadList()
                  this.resetForm()
                  this.show = false
                })
                .catch(res => {
                  this.tips('错误:' + res.msg, 'error')
                })
            }
          } else {
            return false
          }
        })
      },
      beforeAvatarUpload(file) {
        if (
          file.type !== 'application/pdf' &&
          file.type !== 'application/vnd.ms-excel' &&
          file.type !== 'application/msword' &&
          file.type !== 'application/vnd.ms-works' &&
          file.type !== 'image/jpeg' &&
          file.type !== 'image/png' &&
          file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' &&
          file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        ) {
          // this.fileList.unshift({
          //   name: this.fileName.filename,
          //   url: ''
          // })
          this.tips('请上传 pdf,doc,xls 文件', 'warning')
          return false
        }
        if (file.size > 31457280) {
          // this.fileList.unshift({
          //   name: this.fileName.filename,
          //   url: ''
          // })
          this.tips('上传文件不得大于30M', 'warning')
          return false
        }
        if (file.size <= 0) {
          // this.fileList.unshift({name: this.fileName.filename, url: ''})
          this.tips('上传文件不得为空', 'warning')
          // console.log(this.fileList)
          return false
        }
        this.fileName.filename = file.name
        this.uploadState = true
        this.fileError = ''
      },
      uploadSuccess(res, file, List) {
        let that = this
        if (res.code === 1) {
          let respone = res.data
          for (var i = 0; i < respone.length; i++) {
            that.fileList.push({
              name: that.fileName.filename,
              url: respone[i].resOriginalUrl
            })
          }
        } else {
          this.tips(res.msg, 'warning')
        }
        this.uploadState = false
      },
      uploadError() {
        this.tips('上传失败：' + '系统错误', 'error')
        this.uploadState = false
      },
      delFile(file, list) {
        // this.fileList.splice(list, 1)
        if (list.length === 0) {
          this.fileList = []
        } else {
          this.fileList = []
          list.map(item => {
            this.fileList.push({name: item.name, url: item.url})
          })
        }
      },
      toInfo(url) {
        // this.$router.push(url)
      },
      uploadShow() {
        this.show = true
      },
      // 关闭dialog
      resetShow(blur) {
        this.fileList = []
        this.uploadState = false
        this.postData = {
          entName: this.entname,
          fileType: null,
          type: '',
          uplodeDescribe: '',
          file: ''
        }
        this.show = blur.cancleClose
      },
      getUploadList() {
        let params = {
          entNameLike: this.entname
        }
        api
          .postUploadList(params)
          .then(res => {
            this.fileLists = res.data.list[0].fileList
          })
          .catch(res => {})
      },
      // 舆情风险
      getList() {
        this.noData = false
        let params = {
          entName: this.$route.query.entname
        }
        // let _this = this
        api.getkeywordHitInfo(params).then(rtn => {
          // eslint-disable-next-line
          // transfer.$emit('riskNum', 'specialWord:' + _this.totalCount)
          let data = {
            name: Object.keys(rtn.data.keywordCount),
            value: Object.values(rtn.data.keywordCount)
          }
          let code = rtn.code
          if (data.name.length === 0) {
            this.noData = true
            this.code2 = rtn.code
          } else {
            this.noData = true
            this.initChart3(data, code)
          }
        }).catch(err => {
          console.log(err)
          if (err) {
            this.codes+='舆情柱状图'
          }
        })
      },
      initChart3(data, code) {
        const chartDom = document.getElementById('specialWordChart')
        // eslint-disable-next-line
        const chart = echarts.init(chartDom)
        let option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '7%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: data.name,
            axisTick: {
              show: false,
              alignWithLabel: true,
              color: '#ccc'
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#808080',
              rotate: 45
            }
          }],
          yAxis: [{
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#808080'
            }
          }],
          series: [{
            name: '',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              normal: {
                // eslint-disable-next-line
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#20aeff'
                },
                {
                  offset: 1,
                  color: '#17a1ef'
                }
                ])
              }
            },
            data: data.value
          }]
        }
        chart.setOption(option)
        // this.publicBase64 = chart.getDataURL()
        // this.code2 = code
        // console.log(code)
        setTimeout(() => {
          this.publicBase64 = chart.getDataURL()
          this.code2 = code
        }, 1000)
      },
      jingying() {
        let params = {
          entName: this.entname
        }
        api.getriskOperationDescribe(params).then(rtn => {
          this.jingyingTotal = rtn.data
        })
      },
      yuqing() {
        let params = {
          entName: this.entname
        }
        api.getriskOpinionDescribe(params).then(rtn => {
          this.yuqingTotal = rtn.data
        })
      },
      guanlian() {
        let params = {
          entName: this.entname
        }
        api.getriskRelationDescribe(params).then(rtn => {
          this.guanlianTotal = rtn.data
        })
      },
      chuanbo() {
        let params = {
          entName: this.entname
        }
        api.getriskPropagateDescribe(params).then(rtn => {
          this.chuanboTotal = rtn.data
        })
      },
      // 新增企业风险综合描述
      getriskDescribe() {
        this.isShowLoading = true
        this.jingying()
        this.yuqing()
        this.guanlian()
        this.chuanbo()
        this.isShowLoading = false
      },
      //  报告下载
      reportDownloads() {
        this.isDisable = true
        let params = {
          entName: this.entname,
          beanValuePicture: this.beaconFireBase64,
          keywordPicture: this.publicBase64,
          relationPicture: this.svgBase64
        }
        // location.href = this.baseUrl + '/entListAndDetail/getExportRiskDetail?entName=' + this.entname + '&beanValuePicture=' + this.beaconFireBase64 + '&keywordPicture=' + this.publicBase64 + '&relationPicture=' + this.svgBase64
        this.$msgbox({
          title: '系统提示',
          message: '<span>由于文件过大导致下载时间过长，请耐心等待</span>',
          center: true,
          roundButton: true,
          customClass: 'messageBox',
          type: 'info',
          dangerouslyUseHTMLString: true,
          callback: () => {}
        })
        this.downState = '下载中,请稍后...'
        dpi.getExportRiskDetail(params).then(rtn => {
          // console.log(rtn)
          location.href =
              this.baseUrl +
              '/entListAndDetail/exportDetail?name=' +
              rtn.data +
              // encodeURI(encodeURI(rtn.data)) +
              '&entName=' +
              this.entname
              // encodeURI(encodeURI(this.entname))
              // http://192.168.4.20:8007/riskquery_api  天津商科数控技术股份有限公司
          setTimeout(() => {
            this.isDisable = false
            this.downState = '企业风险报告下载'
          }, 500)
        }).catch(err => {
          console.log(err)
          setTimeout(() => {
            this.isDisable = false
            this.downState = '企业风险报告下载'
          }, 1000)
        })
      },
      initChart() {
        // eslint-disable-next-line
        const chartEle = echarts.init(
          document.getElementById('detailHeaderChart')
        )
        const option = {
          backgroundColor: '#fff',
          title: {
            text: '近6个月企业烽火指数走势图',
            show: true,
            textStyle: {
              fontWeight: 'normal',
              fontSize: 12,
              color: '#999'
            },
            left: 'center',
            top: '3%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#333'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#999'
              },
              rotate: 45
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                // eslint-disable-next-line
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 136, 212, 0.2)'
                  }
                  ],
                  false
                )
              }
            },
            data: []
          }],
          yAxis: [{
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: '#999'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#ccc'
              }
            }
          }],
          series: [{
            name: '烽火指数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(0, 136, 212, 0.4)'
                // shadowColor: 'rgba(0, 0, 0, 0.1)',
                // shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: []
          }]
        }
        // 判断是否英文
        // let nameData = this.entname
        // nameData = nameData.replace('(', '（')
        // nameData = nameData.replace(')', '）')
        // if (nameData !== this.entname) {
        //   this.isEng = 1
        // }
        // console.log(nameData, this.isEng)
        let params = {
          // entId: this.entid,
          entName: this.entname
          // statusCode: this.isEng
        }
        api.getWarningChart(params).then(rtn => {
          let data = JSON.parse(rtn.data)
          let date = Object.keys(data)
          let value = Object.values(data)
          this.chartsShow = true
          if (JSON.stringify(data) === "{}" && date.length === 0 && value.length === 0) {
            this.chartsShow = false
            return false
          }
          option.xAxis[0].data = date
          option.series[0].data = value
          chartEle.setOption(option)
          // this.beaconFireBase64 = chartEle.getDataURL()
          // this.code = rtn.code
          setTimeout(() => {
            this.beaconFireBase64 = chartEle.getDataURL()
            this.code = rtn.code
          }, 1000)
          // console.log(this.beaconFireBase64)
        }).catch(err => {
          if (err) {
            this.codes+='烽火指数走势图'
          }
        })
      },
      openDialog(flag) {
        this.dialogTextShow = false
        switch (flag) {
          case 'commonly':
            this.dialogTitle = '一般监控'
            this.statusCode = 0
            break
          case 'important':
            this.dialogTitle = '重点监控'
            this.statusCode = 1
            break
          case 'safe':
            this.dialogTitle = '设为安全'
            this.statusCode = 2
            break
          case 'shooting':
            this.dialogTitle = '排查处理'
            this.statusCode = 3
            break
          case 'whitelist':
            this.dialogTitle = '是否确定加入白名单'
            this.statusCode = 4
            break
        }
        this.$refs.importantDia.show = true
      },
      getEntDetail() {
        let params = {
          // entId: 1,
          entName: this.entname
        }
        let param = {
          entName: this.entname
        }
        api.getBusinessInfobase(params).then(rtn => {
          if (!rtn.data) return false
          let url = ''
          if (rtn.data.url) {
            url = rtn.data.entUrl.split(' ')[0]
            url = url.split(',')[0]
            url = url.split('，')[0]
            url = url.split('/')[0]
          }
          rtn.data.url = url
          this.baseInfo = rtn.data
        })
        api.getReallyAddress(params).then(rtn => {
          if (typeof rtn.data !== 'undefined' && rtn.data !== 'null') {
            this.address = rtn.data
          } else {
            this.address = ''
            return false
          }
        }).catch(err => {
          console.log(err)
          this.address = ''
        })
        if (this.parentName) {
          param.parentName = this.parentName
          api.getRiskBaseinfo(param).then(rtn => {
            if (!rtn.data) return false
            this.riskInfo = rtn.data
            this.riskInfo.statusWord = (rtn.data.controlStatus || rtn.data.controlStatus === 0) ? this.status[rtn.data.controlStatus] : ''
          })
        } else {
          api.getRiskBaseinfo(param).then(rtn => {
            if (!rtn.data) return false
            this.riskInfo = rtn.data
            this.riskInfo.statusWord = (rtn.data.controlStatus || rtn.data.controlStatus === 0) ? this.status[rtn.data.controlStatus] : ''
          })
        }
      },
      dialogEntrue(num, state) {
        if (this.errMsg === '正在备份中，请稍等') {
          return false
        }
        this.errMsg = '正在备份中，请稍等'
        this.Msgflag = true
        let params2 = {
          entId: this.entid,
          realName: this.realName, //  操作人
          status: this.statusCode, //  操作类型 。 0-一般状态，1重点监控， 2设为安全，3排查处理， 4白名单
          entName: this.entname //  企业名称
        }
        let index = this.operateValue
        if (this.securityDate[this.categoryValue - 1] !== undefined) {
          params2.timeLimit = this.securityDate[this.categoryValue - 1]
        }
        if (
          this.statusCode === 1 &&
          this.securityDate1[index - 6] !== undefined
        ) {
          if (this.securityDate1[index - 6] !== '其他') {
            params2.oprateReson = this.securityDate1[index - 6]
          } else {
            if (this.text) {
              params2.oprateReson = this.text
            } else {
              params2.oprateReson = '其他'
            }
          }
        }
        if (
          this.statusCode === 2 &&
          this.securityDate2[index - 9] !== undefined
        ) {
          if (this.securityDate2[index - 9] !== '其他') {
            params2.oprateReson = this.securityDate2[index - 9]
          } else {
            if (this.text) {
              params2.oprateReson = this.text
            } else {
              params2.oprateReson = '其他'
            }
          }
        }
        if (
          this.statusCode === 3 &&
          this.securityDate3[index - 12] !== undefined
        ) {
          if (this.securityDate3[index - 12] === '线上处理') {
            params2.oprateReson = this.securityDate3[index - 12]
          }
        }
        if (
          this.statusCode === 0 &&
          this.securityDate4[index - 16] !== undefined
        ) {
          if (this.securityDate4[index - 16] !== '其他') {
            params2.oprateReson = this.securityDate4[index - 16]
          } else {
            if (this.text) {
              params2.oprateReson = this.text
            } else {
              params2.oprateReson = '其他'
            }
          }
        }
        if (
          this.securityDate1[index - 6] === '其他' ||
          this.securityDate2[index - 9] === '其他' ||
          this.securityDate3[index - 12] === '其他' ||
          this.securityDate4[index - 16] === '其他'
        ) {
          params2.oprateReson = this.text
        }
        // 白名单类型
        if (this.statusCode === 4 || this.statusCode === 3) {
          if (this.remarkName) {
            params2.remarks = this.remarkName
          } else {
            delete params2.remarks
          }
        } else {
          delete params2.remarks
        }
        if (this.statusCode === 4) {
          let oprateResons = this.securityDate5[this.listValue - 18]
          params2.oprateReson = oprateResons
        }
        if (!params2.oprateReson) {
          this.errMsg = '操作原因不能为空'
          this.Msgflag = false
          return false
        }
        // params增加烽火值和风险类型
        // api.setCompanyStatus(params).then(rtn => {
        //   setTimeout(() => {
        //     this.getEntDetail()
        // }, 1000)
        // })
        // console.log(num, state)
        if (num !== '' && typeof num !== 'undefined') {
          params2.totalRiskScore = num
        }
        if (state) {
          params2.riskDescription = state
        } else {
          delete params2.riskDescription
        }
        this.errMsg = '正在备份中，请稍等'
        // console.log(params2)
        api.getAddOperationRecord(params2).then(rtn => {
          if (rtn.code !== 1) return false
          if (this.statusCode === 3) {
            this.pccl()
          } else {
            setTimeout(() => {
              this.Msgflag = false
              this.errMsg = ''
              this.$refs.importantDia.show = false
              this.errMsg = '操作成功'
              this.getEntDetail()
              this.listValue = ''
              this.remarkName = ''
              this.operateValue = ''
              this.text = ''
              this.errMsg = ''
            }, 1000)
          }
        }).catch(err => {
          console.log(err.msg)
          this.errMsg = '操作失败'
          setTimeout(() => {
            this.Msgflag = false
            this.errMsg = ''
            this.$refs.importantDia.show = false
            this.getEntDetail()
            this.listValue = ''
            this.remarkName = ''
            this.operateValue = ''
            this.text = ''
          }, 1500)
          return false
        })
      },
      pccl() {
        let params3 = {
          entName: this.entname,
          beanValuePicture: this.beaconFireBase64,
          keywordPicture: this.publicBase64,
          relationPicture: this.svgBase64
        }
        api.getExportRiskDetail(params3).then(res => {
          if (res.data) {
            api.getoprateCaseProcessstart({
              entName: this.entname,
              riskreportPath: res.data
            }).then(ret => {
              // console.log(ret)
              console.log('成功')
              setTimeout(() => {
                this.Msgflag = false
                this.errMsg = ''
                this.$refs.importantDia.show = false
                this.errMsg = '操作成功'
                this.getEntDetail()
                this.listValue = ''
                this.remarkName = ''
                this.operateValue = ''
                this.text = ''
                this.errMsg = ''
              }, 2000)
            }).catch(ert => {
              console.log(ert)
              this.errMsg = '操作失败'
              setTimeout(() => {
                this.Msgflag = false
                this.errMsg = ''
                this.$refs.importantDia.show = false
                this.getEntDetail()
                this.listValue = ''
                this.remarkName = ''
                this.operateValue = ''
                this.text = ''
              }, 1500)
            })
          }
        }).catch(err => {
          console.log(err)
          this.errMsg = '操作失败'
          setTimeout(() => {
            this.Msgflag = false
            this.errMsg = ''
            this.$refs.importantDia.show = false
            this.getEntDetail()
            this.listValue = ''
            this.remarkName = ''
            this.operateValue = ''
            this.text = ''
          }, 1500)
        })
      },
      dialogClose() {
        this.$refs.importantDia.show = false
        this.listValue = ''
        this.remarkName = ''
        this.operateValue = ''
        this.text = ''
        this.errMsg = ''
        this.Msgflag = false
      }
    },
    mounted() {
      this.entname = this.$route.query.entname || ''
      let userInfo = this.$store.state.user.userInfo
      this.realName = userInfo.realName
      if (this.$route.query.parentName) {
        this.parentName = this.$route.query.parentName
      }
      this.postData.entName = this.$route.query.entname || ''
      // this.getDataCount()
      this.initChart()
      this.getEntDetail()
      this.getriskDescribe()
      /** 恢复页面置顶**/
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      this.getList()
      this.getUploadList()
      this.baseUrl = window.api_host
    },
    components: {
      jSubNav,
      jDialog,
      jLoading,
      jNoData
    }
  }
</script>

<style lang="scss" scoped>
  .detail-header {
    height: 380px;
    display: flex;
    margin-top: 28px;
  }
  .active:hover {
    color: #000;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .remarkspan {
    display: block;
    font-weight: bold;
  }
  .left {
    height: 100%;
    flex-grow: 61.49;
    margin-right: 20px;
    padding: 0 30px;
    max-width: 840px;
    position: relative;
    .whitelist {
      position: absolute;
      right: 30px;
      top: 35%;
    }
    .prediction {
      color: #ff8a0d;
      background: #ffe6cc;
      padding: 0 10px;
      position: relative;
      display: inline-block;
      font-size: 12px;
      margin-left: 18px;
      height: 20px;
      line-height: 20px;
      &::after {
        content: '';
        position: absolute;
        border: 10px solid transparent;
        border-left-color: #ffe6cc;
        top: 0;
        right: -20px;
      }
    }
    h3 {
      font-size: 16px;
      font-weight: bold;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      background: -webkit-linear-gradient(#fff, #fff, #f0fbff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#fff, #fff, #f0fbff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#fff, #fff, #f0fbff); /* Firefox 3.6 - 15 */
      background: linear-gradient(#fff, #fff, #f0fbff); /* 标准的语法 */
      a {
        color: #000;
      }
      span {
        color: #ff8a0d;
        background: #ffe6cc;
        padding: 0 10px;
        position: relative;
        display: inline-block;
        font-size: 12px;
        margin-left: 18px;
        height: 20px;
        line-height: 20px;
        &::after {
          content: '';
          position: absolute;
          border: 10px solid transparent;
          border-left-color: #ffe6cc;
          top: 0;
          right: -20px;
        }
      }
    }
    .info-list {
      display: flex;
      flex-wrap: wrap;
      .overflow-hidden {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      li:last-child {
        // width: 100%;
      }
      li {
        min-width: 50%;
        height: 32px;
        font-size: 14px;
        line-height: 32px;
        position: relative;
        span {
          display: inline-block;
          width: 85px;
          color: #a6a6a6;
          &.big {
            width: 115px;
          }
          &.flames {
            width: 90px;
          }
          /*&.s-min {*/
          /*width: 40px;*/
          /*}*/
          &.hot-number {
            font-size: 20px;
            color: #ff3300;
            font-weight: bold;
          }
        }
        .icon-risk {
          width: 30px;
          height: 30px;
          background: url(../../assets/images/risk.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          position: absolute;
          left: 72px;
          top: -2px;
        }
        &.min {
          min-width: 50%;
          width: 50%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.warning-type-word {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          // width: 60%;
        }
      }
      .riskNum {
        line-height: 21px;
        .icon {
          background-image: url("../../assets/images/yujing.png");
          height: 30px;
          width: 103px;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .uploadingFiles {
        display: inline-block;
        width: 566px;
        height: 24px;
        background-color: #f2f2f2;
        border-radius: 12px;
        position: relative;
        top: 6px;
        line-height: 24px !important;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span,
        a {
          line-height: 24px;
          margin: 0;
          margin-right: 10px;
        }
        a {
          color: #3f8efa;
        }
      }
      .uploadingFilesNoBg {
        display: inline-block;
        width: 566px;
        height: 24px;
        line-height: 24px !important;
        padding: 0 0px;
      }
      .files {
        font-size: 14px;
        color: #1688f3;
        position: absolute;
        right: -174px;
        bottom: 0;
        cursor: pointer;
        i {
          font-size: 18px;
          position: relative;
          top: 2px;
        }
        span {
          color: #1688f3;
          margin-left: 3px;
        }
        &:hover span {
          text-decoration: underline;
        }
      }
    }
    .detail-btn-group {
      display: flex;
      justify-content: flex-end;
      position: relative;
      margin-top: 10px;
      button {
        padding: 10px 25px;
        font-weight: normal;
      }
      .presentation {
        background-color: #3f8efa;
        color: white;
        border-radius: 5px;
        position: absolute;
        left: 0;
        cursor: pointer;
        font-size: 14px;
        span {
          margin-left: 5px;
        }
        &:hover {
          /*opacity: 0.9;*/
        }
      }
    }
  }
  
  .right {
    height: 100%;
    width: 350px;
    flex-grow: 36.76;
    overflow: hidden;
    .detail-header-chart {
      width: 100%;
      height: 100%;
    }
  }
  
  .detail-dialog {
    // -webkit-text-stroke: 0.2px;
    -webkit-font-smoothing: antialiased;
    width: 545px;
    h5 {
      line-height: 46px;
      font-weight: bold;
      &.operate-man {
        margin: 10px 0 0;
      }
    }
    textarea {
      height: 60px;
      width: 435px;
      margin: 35px 0 0 40px;
    }
    p {
      input {
        margin-left: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-bottom: 10px;
      button {
        cursor: pointer;
      }
      button:nth-child(2) {
        margin-left: 20px;
      }
    }
    .remark {
      margin-top: 5px;
    }
    ::-webkit-scrollbar {
      /*隐藏滚轮*/
      display: none;
    }
  }
  
  .errMsg {
    color: red;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .graph {
    width: 100%;
    height: 500px;
  }
  
  .special-word-chart {
    width: 100%;
    height: 350px;
    margin-bottom: 30px;
  }
  
  .detail-con {
    width: 1360px;
    // height: 395px;
    background-color: #ffffff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin-top: 20px;
    padding: 0 20px 20px;
    box-sizing: border-box;
    h4.detail-base-title {
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      padding: 30px 0 0 12px;
      position: relative;
      background-image: linear-gradient(0deg, #1891ef, #1891ef);
      background-size: 3px 16px;
      background-position: 0 37px;
      background-repeat: no-repeat;
      border-bottom: 1px solid #eee;
    }
    .table-wrap {
      padding: 30px 20px;
      position: relative;
      table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        td,
        th {
          border: 1px solid #e2e2e2;
          /*line-height: 40px;*/
        }
        th {
          /*line-height: 38px;*/
          color: #999;
          background-color: #f5faff;
        }
        td.long {
          text-align: left;
          padding: 10px;
          line-height: 24px;
        }
        &.business {
          th {
            width: 232px;
          }
          td {
            text-align: left;
            padding-left: 20px;
          }
          tr {
            line-height: 45px;
          }
        }
      }
    }
  }
  .dialog {
    width: 600px;
  }
  .file-list {
    padding: 5px;
    a {
      cursor: pointer;
      display: block;
      color: #3f8efa;
      &:hover {
        color: #fff;
        &:after {
          content: '   [预览]';
          color: #e6a23c;
        }
      }
    }
  }
  .upload-details {
    margin-top: 20px;
    text-align: center;
    .upload-matter {
      margin-top: 25px;
    }
    .upload-matter:nth-child(1) {
      margin-top: 0px;
    }
    label {
      color: #999;
      font-size: 14px;
      span {
        color: red;
        margin-right: 5px;
      }
    }
    .ent-name {
      width: 457px;
      height: 36px;
      line-height: 36px;
      vertical-align: middle;
      background-color: #ffffff;
      border-radius: 5px;
    }
    .select-name {
      display: block;
      margin-top: 10px;
      color: #999;
      margin-right: 22%;
    }
    .menu-down {
      i {
        line-height: 36px;
      }
    }
    .menu-explain {
      height: 107px;
      vertical-align: top;
      .explain {
        margin-right: 11px;
      }
    }
    .upload-accessory {
      display: flex;
      margin-left: 8%;
      .accessory {
        margin-left: 10px;
      }
      .sc {
        color: #3197ff;
        font-size: 14px;
        i {
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
    .btn {
      width: 111px;
      height: 34px;
      line-height: 4px;
      margin-top: 30px;
    }
  }
  .padt5 {
    
  }
  .nodatachart {
    height: 100%;
    width: 100%;
    padding: 50px 0;
  }
  .nodatachart1 {
    height: 50px;
  }
  /deep/ *[disabled],
  input[disabled] {
    opacity: 0.8;
  }
</style>



// WEBPACK FOOTER //
// src/view/entDetail/index.vue